<template>
  <div :class="isCollapse? 'wrapper-active': 'wrapper'">
    <div :class="isCollapse? 'wrapper-content-active':'wrapper-content'">
      <div :class="isCollapse? 'wrapper-content-top-active': 'wrapper-content-top'">
        <span>探寻关系</span>
        <i :class="isCollapse? 'el-icon-arrow-down': 'el-icon-arrow-up'" @click="showMenu"></i>
      </div>
      <div v-if="!isCollapse" class="wrapper-content-center">
        <div class="item search-node">
          <el-input v-model="nodeWord" placeholder="请输入搜索的实体内容">
            <el-button slot="append" icon="el-icon-search" @click="searchNode"></el-button>
          </el-input>
        </div>
        <div class="item">
          <div class="item-title">
            <span>节点关系</span>
          </div>
          <div class="item-content">
            <el-checkbox :indeterminate="nodeRelationIsIndet" v-model="nodeRelationCheckAll" @change="handleCheckAllChange($event,'nodeRelation')">全选</el-checkbox>
            <el-checkbox-group v-model="nodeRelation" @change="changeCheckbox($event,'nodeRelation')">
              <el-checkbox
                v-for="item in nodeRelations"
                :label="item.value"
                :key="item.value"
              >{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="item">
          <div class="item-title">
            <span>实体类型</span>
          </div>
          <div class="item-content">
            <el-checkbox :indeterminate="entityTypeIsIndet" v-model="entityTypeCheckAll" @change="handleCheckAllChange($event,'entityType')">全选</el-checkbox>
            <el-checkbox-group v-model="entityType" @change="changeCheckbox($event,'entityType')">
              <el-checkbox v-for="item in entityTypes" :label="item.value" :key="item.value">{{item.label}}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
      <div v-if="!isCollapse" class="wrapper-content-bottom">
        <el-button type="primary" size="medium" @click="getAltas">确定</el-button>
        <el-button type="default" size="medium" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
const filterMap = ['nodeRelation','entityType']
export default {
  name: "LeftMenu",
  props:{
    nodeRelations:{
      type: Array
    },
    entityTypes:{
      type: Array
    }
  },
  data() {
    return {
      isCollapse: false,
      nodeRelation:[],
      entityType:[],
      nodeWord:'',
      entityTypeCheckAll:true,
      nodeRelationCheckAll:true,
      entityTypeIsIndet:false,
      nodeRelationIsIndet:false,
    }
  },
  mounted() {
    // filterMap.forEach((item,index)=>{
    //   this[item] = this.filters[item] || (index<3?'':[])
    // })
  },
  methods: {
    /*重置*/
    reset() {
      this.entityTypeCheckAll = true
      this.nodeRelationCheckAll = true
      filterMap.forEach((item,index)=>{
        this[item] = this[`${item}s`].map( d => d.value)
        console.log(this[item]);
      })
    },
    /*展开/折叠条件*/
    showMenu() {
      // this.isCollapse = !this.isCollapse;
      this.$emit("collapseMenu");
    },
    //  用户选择完筛选条件后，点击确定按钮进行图谱数据更新
    getAltas(){
      let param = {
        nodeRelation:this.nodeRelation,
        entityType:this.entityType
      }
      this.$emit('getFilter',param)
    },
    //  全局搜索
    searchNode(){
      this.$emit('seachNode',this.nodeWord)
    },
    //  全选操作
    handleCheckAllChange(val,type){
      if(val){
        this[type] = this[type+'s'].map( d => d.value)
      }else{
        this[type] = []
      }
      this.isIndeterminate = false;
    },
    //  检测是否全选状态
    changeCheckbox(val,type){
      let len = val.length
      let allLen = this[type+'s'].length
      if(len){
        if(len == allLen){
          this[type+'IsIndet'] = false
          this[type+'CheckAll'] = true
        }else{
          this[type+'IsIndet'] = true
        }
      }else{
        this[type+'IsIndet'] = false
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import '../../../../assets/styles/base_style.scss';
  .wrapper {
    height: 100%;
    background: #fff;
    box-shadow: 5px 0px 5px rgba(0, 21, 41, 0.08);
    .wrapper-content {
      height: 100%;
      width: 100%;
      display: grid;
      grid-template-rows: 40px auto 60px;
      margin: 0 auto;
      .wrapper-content-top {
        border-bottom: 2px solid #e3e7ed;
        height: 100%;
        line-height: 40px;
        margin:0 24px;
        > span {
          font-size: 16px;
          font-weight: bold;
        }
        > i {
          float: right;
          font-size: 16px;
          line-height: 40px;
          cursor: pointer;
        }
      }
      .wrapper-content-center {
        height: 100%;
        overflow-y: auto;
        min-height: 420px;
        padding-left:24px;
        width: 264px;
        box-sizing: content-box;
        @include scrollbarStyle(8px,8px,transparent,#e3e7ed);

      }
      .wrapper-content-bottom {
        padding:0 24px;
        height: 100%;
        line-height: 60px;
        border-top: 1px solid #e3e7ed;
        >button{
          width: 96px;
        }
      }
    }
  }
  .wrapper-active {
    height: 100%;
    .wrapper-content-active {
      height: 35px;
      width: 80px;
      margin: 10px 0px 0px 10px;
      background-color: #fff;
      border-radius: 4px;
      padding: 0px 10px;
      position: absolute;
      z-index: 10;
      .wrapper-content-top-active {
        height: 100%;
        line-height: 35px;
        > span {
          font-size: 15px;
          font-weight: bold;
        }
        > i {
          float: right;
          font-size: 16px;
          line-height: 35px;
          cursor: pointer;
        }
      }
    }
  }
  .item {
    margin-top: 8px;
    .item-title > span {
      font-size: 15px;
      color: #303133;
    }
    .item-content {
      margin-top: 16px;
      /deep/ .el-radio-group{
        label{
          margin-bottom: 16px;
        }
        .el-radio__input{
          &.is-checked{
            .el-radio__inner{
              border-color: #2463B9;
              background: #2463B9;
            }
          }
        }
        .el-radio__input.is-checked+.el-radio__label {
            color: #2463B9;
        }
      }
      /deep/ .el-checkbox{
        margin-bottom: 16px;
        .el-checkbox__input{
          &.is-checked{
            .el-checkbox__inner{
              border-color: #2463B9;
              background: #2463B9;
            }
          }
        }
        .el-checkbox__input.is-checked+.el-checkbox__label {
            color: #2463B9;
        }
      }
    }
    &:first-child{
      margin-top: 24px;
    }
    &.inv-item{
      /deep/ .el-radio-group{
        label{
          margin-right: 14px;
        }
      }
      .split{
        height: 1px;
        width: 8px;
        margin:0 4px 0;
        display: inline-block;
        background: #303133;
      }
    }
    /deep/ .inv-type{
        width: 50px;
        .el-input__inner{
          height: 22px;
          padding: 0 8px;
        }
      }
    &.search-node{
      .el-button{
        background: transparent!important;
        color: #303133;
      }
    }
  }
  /deep/ .el-button--primary {
    background-color: #2463B9;
    border: 1px solid #2463B9;
  }
  /deep/ .el-button--default {
    background-color: #fff!important;
    border: 1px solid #2463B9;
    color: #2463B9;
  }
  /deep/ .el-input__inner {
    height: 35px;
    line-height: 35px;
  }
  /deep/ .el-input__icon {
    line-height: 35px;
  }
  .wrapper-content-center::-webkit-scrollbar {
    width: 6px;
  }
  .wrapper-content-center::-webkit-scrollbar-track {
    background-color: #fff;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  .wrapper-content-center::-webkit-scrollbar-thumb {
    background-color: #ccc;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
</style>
